<template>
  <div class="daka-warp" v-if="getCardReady && getDakaDateReady && getDakaReady">
    <div class="calendar-wrapper">
      <calendar
        model="component"
        :scroll-change-date="true"
        :is-show-week-view="false"
        :minute-step="1"
        :show="true"
        mark-type="dot"
        format="YY/MM/DD hh:mm"
        week-start="sunday"
        picker-type="datetime"
        :show-today-button="false"
        :disabled-week-view="false"
        :visible="true"
        :dotDate="dakaDate"
        @clickDate="clickDateHandler"
      ></calendar>
    </div>
    <div class="daka-record-area">
      <div class="title">
        <span class="record-icon"></span>
        <span class="date-text">{{ dateText }}打卡记录</span>
      </div>
      <time-line 
      :dakaData="dakaData"
      @del="delDaka"
      :cardDataList="cardLists" />
    </div>
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import calendar from "./components/vueHashCalendar/src/DatetimePicker";
import timeLine from "./components/timeline/timeline";
import cloudHandler from '../../cloud/index';
import { formatDay, formatTimeChinese } from '../../utils/index';
import Dialog from "../../../static/vant/dialog/dialog";
export default {
  data() {
    return {
      dakaData: [],
      selectedDay: formatDay(new Date()),
      dakaDate: [],
      cardLists: [],
      getCardReady: false,
      getDakaReady: false,
      getDakaDateReady: false,
    }
  },
  computed: {},
  methods: {
    delDaka(id) {
      Dialog.confirm({
          title: "警告",
          message: "删除后，打卡记录无法回复，您确定要执行此操作吗？"
        })
        .then(() => {
          cloudHandler.delDaka(id)
          .then(() => {
            this.getDakaRecord(this.selectedDay);
          })
        })
    },
    getDateText() {
      if (!this.selectedDay) return '';
      const date = new Date(this.selectedDay);
      return `${date.getMonth() + 1}月${date.getDate()}日`
    },
    getDakaRecord(dayString) {
      cloudHandler
      .getDakaRecordLists(dayString)
      .then((res) => {
        this.dakaData = res.body;
        this.getDakaReady = true;
      })
    },
    getDakaRecordDate() {
      cloudHandler
      .getDakaRecordListsDate()
      .then((res) => {
        this.getDakaDateReady = true;
        this.dakaDate = (res.body || []).sort((a, b) => new Date(a.created_time).getTime() - new Date(b.created_time).getTime());
      })
      .catch(err => {
        console.log(err);
      })
    },
    getCardLists() {
      cloudHandler.getCardLists()
      .then(res => {
        this.getCardReady = true;
        this.cardLists = res.body;
      })
    },
    clickDateHandler(dateString) {
      this.selectedDay = dateString;
    }
  },
  components: {
    calendar,
    timeLine
  },
  computed: {
    dateText() {
      return this.getDateText();
    }
  },
  watch: {
    selectedDay: {
      immediate: true,
      handler() {
        this.getDakaRecord(this.selectedDay)
      }
    }
  },
  created() {
    // this.selectedDay = ev.date;
    this.getDakaRecordDate();
    this.getCardLists();
  },
  mounted() {
    this.getDateText();
  }
};
</script>

<style lang="less">
.daka-warp {
  background: rgba(247, 248, 250, 1);
  padding-top: 23px;
  padding-bottom: 4px;
  min-height: 100vh;
  .calendar-wrapper {
    margin: 0 25px 25px 25px;
  }
}
.custom-calendar {
  padding: 13px 20px;
}
.custom-calendar-header {
  font-size: 13px;
  font-weight: 600;
  color: rgba(61, 71, 92, 1);
  line-height: 18px;
}
.daka-record-area {
  padding: 0 33px 0 27px;
  .title {
    display: flex;
    color: #3D475C;
    font-size: 16px;
    align-items: center;
    .record-icon {
      width: 20px;
      height: 20px;
      display: block;
      background: url(http://cdn.ielts.group/记录@3x.png) center center no-repeat;
      background-size: contain;
      margin-right: 9px;
    }

  }
}
</style>
